<template>
  <div>
    <div class="toolbar">
      <Input v-model="query.keyword" placeholder="关键字" suffix="ios-search" style="width: 200px" />
      <Button icon="ios-search" @click="search">查询</Button>
      <Button icon="ios-add" @click="onAdd('')">新增</Button>
      <Button icon="ios-create-outline" @click="onEdit">编辑</Button>
      <Button icon="ios-refresh">刷新</Button>
      <Button icon="ios-trash-outline" @click="onDelete">删除</Button>
    </div>
    <div class="content">
      <Table
        :data="data"
        :columns="column"
        stripe
        @on-selection-change="onSelect"
        @on-sort-change="onSortChange"
      ></Table>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page
            :total="page.total"
            :current="page.index"
            :page-size="page.size"
            @on-change="changePage"
            :show-total="true"
            :show-elevator="true"
            :show-sizer="true"
            @on-page-size-change="changePageSize"
          ></Page>
        </div>
      </div>
    </div>
    <Modal
      v-model="modal"
      :title="title"
      ok-text="保存"
      @on-ok="handleSave('formInline')"
      @on-cancel="cancel"
      ref="modal" draggable
      :mask-closable="false"
    >
      <Form ref="formInline" :model="model" :rules="ruleInline" :label-width="80">
        <FormItem label="名称" prop="name">
          <Input type="text" v-model="model.name" placeholder="名称"></Input>
        </FormItem>
        <FormItem label="区域">
          <i-select
            v-model="model.province"
            style="width:120px"
            :filterable="true"
            @on-change="pchange"
          >
            <i-option v-for="item in plist" :value="item.value" :key="item.value">{{ item.label }}</i-option>
          </i-select>
          <i-select
            v-model="model.city"
            style="width:120px"
            :filterable="true"
            @on-change="cchange"
          >
            <i-option v-for="item in clist" :value="item.value" :key="item.value">{{ item.label }}</i-option>
          </i-select>
          <i-select v-model="model.district" style="width:120px">
            <i-option v-for="item in dlist" :value="item.value" :key="item.value">{{ item.label }}</i-option>
          </i-select>
        </FormItem>
        <FormItem label="地址">
          <Input type="text" v-model="model.address" placeholder="地址"></Input>
        </FormItem>
        <FormItem label="是否有效">
          <i-switch v-model="status" @on-change="statusChange" />
        </FormItem>
        <FormItem label="排序">
          <Input v-model="model.seq" type="number" placeholder="排序" style="width:120px" />
        </FormItem>
        <FormItem label="描述">
          <Input v-model="model.description" type="textarea" placeholder="描述" />
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import {
  getCompanyData,
  getAreaTree,
  saveCompany,
  deleteCompany
} from "@/api/data/";
//import {getCompanyData} from '@/api/url';
import { dateTimeFormat } from "@/libs/util/";
export default {
  data() {
    return {
      data: [],
      column: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        { title: "公司", key: "name", width: 120, sortable: true },
        { title: "所在省", key: "provinceName", width: 150 },
        { title: "所在城市", key: "cityName", width: 100 },
        { title: "区县", key: "districtName", width: 80 },
        { title: "详细地址", key: "address", width: 300 },
        { title: "描述", key: "description", width: 300 },
        { title: "排序", key: "seq", width: 300, sortable: true },
        {
          title: "状态",
          key: "status",
          width: 100,
          render: (h, params) => {
            var type = "";
            switch (params.row.status) {
              case 1:
                type = "有效";
                break;
              case 0:
                type = "无效";
                break;
            }
            return h("div", type);
          }
        }
      ],
      query: { keyword: "" },
      page: { index: 1, size: 10, orderBy: "desc", field: "addTime" },
      timeRange: [],
      modal: false,
      title: "新增",
      model: {},
      status: true,
      plist: [],
      clist: [],
      dlist: [],
      areaData: [],
      ruleInline: {
        name: [{ required: true, message: "请输入公司名称", trigger: "blur" }]
      },
      selectedRow: [],
      loading:true,
    };
  },
  mounted() {
    var time = new Date().getTime() - 24 * 60 * 60 * 1000;
    var yesday = new Date(time); // 获取的是前一天日期
    this.timeRange = [yesday, new Date()];
    this.loadData();
    this.loadAreaData();
  },
  methods: {
    loadData() {
      this.query.startTime = this.timeRange[0];
      this.query.endTime = this.timeRange[1];
      this.page.query = JSON.stringify(this.query);
      getCompanyData(this.page).then(res => {
        var data = res.data;
        if (data.status != 200) {
          this.$Message.info(data.msg);
        } else {
          this.data = data.data.data;
          this.page.total = data.data.pageCount;
        }
      });
    },
    loadAreaData() {
      getAreaTree().then(res => {
        var data = res.data;
        if (data.status != 200) {
          this.$Message.info(data.msg);
        } else {
          this.plist = data.data;
        }
      });
    },
    changePage(index) {
      this.page.index = index;
      this.loadData();
    },
    search() {
      console.log(this.timeRange);
      this.loadData();
    },
    changePageSize(size) {
      this.page.size = size;
      this.loadData();
    },
    handleSave(name) {
      var _this=this;
      console.log(this.model);
      this.$refs[name].validate(valid => {
        if (valid) {
          saveCompany(this.model).then(res => {
            var data = res.data;
            if (data.status != 200) {
              this.$Message.error(data.msg);
            } else {
              this.loadData();
            }
          });
        } else {
          this.$Message.error("Fail!");
          _this.modal = true;
        }
      });
    },
    cancel() {},
    statusChange(status) {
      this.model.status = status ? 1 : 0;
    },
    onAdd() {
      this.$refs["formInline"].resetFields();
      this.modal = true;
      this.model.id=0;
    },
    onEdit() {
      if (this.selectedRow.length > 1) {
        this.$Message.error("只能选择一项修改.");
        return false;
      }
      this.model = this.selectedRow[0];
      this.title = "修改";
      this.modal = true;
      this.status = this.model.status == 1;
    },
    pchange(item) {
      console.log(item);
      this.clist = this.plist.filter(m => m.code === item)[0].children;
      this.dlist.length=0;
      //this.model.city = '';
      //this.model.district = '';
    },
    cchange(item) {
      this.dlist = this.clist.filter(m => m.code === item)[0].children;
    },
    onSelect(selection, row) {
      this.selectedRow = selection;
      console.log(this.selectedRow);
    },
    onSortChange(obj) {
      this.page.field = obj.key;
      this.page.orderBy = obj.order;
      this.loadData();
    },
    onDelete() {
      if (this.selectedRow.length == 0) {
        this.$Message.error("请选择要删除的项.");
        return false;
      }
      var ids = [];
      this.selectedRow.forEach(v => {
        ids.push(v.id);
      });
      deleteCompany({ ids: ids.join(",") }).then(res => {
        var data = res.data;
        if (data.status != 200) {
          this.$Message.error(data.msg);
        } else {
          this.loadData();
        }
      });
    }
  }
};
</script>

